<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>单表维护示例</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />   
    
 	<!--metroic组件中的图标start-->
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <!--metroic组件中的图标end-->

    <!--阿里云下载的图标start-->
    <link rel="stylesheet" href="../assets/custom/css/iconfont.css"/>
    <!--阿里云下载的图标end-->

    <!--组件的依赖文件start-->   <!--base文件-->
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!--组件的依赖文件end-->

    <!--<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />-->

    <!--metroic常用下拉列表依赖start-->
    <link href="../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <script src="../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
    <script src="../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
    <!--metroic常用下拉列表依赖end-->

    <!--可搜索下拉框依赖strat-->
    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
    <script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
    <script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
    <!--可搜索下拉框依赖end-->

    <!--metroic组件风格的依赖start-->   <!--base文件-->
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <!--metroic组件风格的依赖end-->

    <!--layui组件start-->
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <script src="../assets/global/plugins/layui/layui.all.js"></script>
    <!--layui组件end-->

    <!--自定义公共的css start-->   <!--base文件-->
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
    <link rel="stylesheet" href="../assets/custom/css/change_form.css"/>


 	<body class="contentPadding"> 		
 		<!-- 如果显示标题，使用 portlet-title -->
 		<div class="portlet-title"></div>
 		
 		<!-- 具体内容 -->
 		<div class="portlet-body"> 			
 			
 			<!-- 查询条件与工具栏 -->
 			<div class="from_control clearfix">
 				<!-- 搜索条件靠左 -->
 				<div class="from_control_l">
 					
							<div class="select_drop_box">
				                <span class="label_on_fl">普通下拉框:</span>
				                <div class="fl"  style="width: 120px">
				                    <select class="form-control bs-select" id="normalSelect">
				                        <option value="&nbsp;">全量</option>
				                        <option value="1">时间戳增量</option>
				                        <option value="2">比对同步</option>
				                    </select>
				                </div>
				            </div>
				           
							<div class="select_drop_box">
								<span class="label_on_fl">可搜索下拉框：</span>
								<div class="select_drop fl">
								  <select class="form-control select2" id="searchSelect">
								    <option value="&nbsp;">全部</option>
								    <option value="1">目标1</option>
								    <option value="2">目标2</option>
								  </select>
								</div>
							</div>							
							
							<!-- 搜索框 -->
							<div>
	                            <div class="data_search fl">
	                                <input class="inputSmall" name="searchKey" id="searchKey" autocomplete="off">
	                            </div>
	                            <button id="search-btn" class="btn layui-btn blue-hoki fl" data-type="reload">搜索</button>
	                        </div>
						</div>
					
				<!-- 操作按钮靠右-->
				<div class="from_control_r">
							<button class="btn default showCheckedData">显示选中行数据</button>
							<button class="btn default showIndexData">获取指定行数据</button>
							<div class="btn-group">
								<a href=""
									class="btn dark btn-outline btn-sm dropdown-toggle"
									data-toggle="dropdown" data-hover="dropdown"
									data-close-others="true">新增向导 <span class="fa fa-angle-down"></span>
								</a>
								<ul class="dropdown-menu pull-right">
									<li>
									  <a href="javascript:;" class="process_tb_copy">表单复制</a>
									</li>
									<li>
									  <a href="javascript:;" class="process_tb_map">表映射</a>
									</li>
									<li>
									  <a href="javascript:;">join集成</a>
									</li>
								</ul>
							</div>
						</div>
 			</div>
 				 	
 			 		 		
 			<!-- 列表 -->
 			<table class="layui-table" id="LAY_table_demo01" lay-filter="demo01"></table>
 		</div>
 	
 		
 		<!-- <div class="portlet-footer"></div> -->
 	</body>
 	
 	<!-- 操作列按钮 -->
 	<script type="text/html" id="rowToolbar">
		<!-- 标签式按钮  lay-event示例 -->
		<a class="layui-btn layui-btn-xs" lay-event="detail">变色</a>
		<!-- 图标按钮 -->
        <a data-placement="top" title="查看"  lay-event="detail"><i class="iconfont icon-icon-chakanxq"></i></a>
        <a href="javascript:openDialog('{{d.id}}');" data-toggle="tooltip" data-placement="top" title="修改"><i class="iconfont icon-icon_edit"></i></a>
   		<a href="javascript:;" title="删除" lay-event="del"><i class="iconfont icon-zuofei"></i></a>
	</script>
	
	<!-- 使用layui模板重写单元格显示方式示例【性别】列-->
	<script type="text/html" id="sexCellShow">
		{{#  if(d.sex === '男'){ }}
    		<span style="color:blue">{{d.sex}}</span>			
		{{#  } else { }}
    		<span style="color:red">{{d.sex}}</span>			
  		{{#  } }}
	</script>
 	
 	<script type="text/javascript">
 	
 		var layTableIns;	//layui table实例
 		
 		layui.use('table', function(){
 	       var table = layui.table;

 	        //方法级渲染
 	       layTableIns =  table.render({
 	            elem: '#LAY_table_demo01'
 	            ,limit:10 	            
 	            ,url: 'layui_table.json'
 	            ,cols: [[
 	                {checkbox: true} 	                
 	                ,{field:'id', title: '流程名称', minWidth:80}
 	                ,{field:'username', title: '用户名', minWidth:80,templet: '<div><a href="/detail/{{d.id}}" target="newWindow" class="layui-table-link">{{d.username}}</a></div>'}
 	                ,{field:'sex', title: '性别', minWidth:80, templet:'#sexCellShow'}
 	                ,{field:'city', title: '城市', minWidth:80, style:'background-color: #5FB878; color: #fff;'}
 	                ,{field:'sign', title: '抽取方式', minWidth:80}
 	                ,{field:'experience', title: '运行频率', minWidth:80}
 	                ,{field:'score', title: '积分', minWidth:80
 	                	,templet: function(d){ //函数式自定义单元格内容
 	                		if (d.score<60) {
 	                			return d.score + '<span style="color: #c00;">'+ '-[补考]</span>';
 	                		}
 	                		else {
 	                			return '<span>'+ d.score +'</span>';
 	                		}
 	               		 } 	                   
 	                }
 	                ,{field:'classify', title: '职业', minWidth:80, sort:true, edit:true}
 	                ,{field:'wealth', title: '运行状态', minWidth:80}
 	                ,{width:180, align:'center', toolbar: '#rowToolbar',title:'操作'}
 	            ]] 	            
 	            ,page: true
 	            ,height: 'full-70' 	            
 	            ,done :function(result, curr, count){
 	            	//如果是异步请求数据方式，result即为你接口返回的信息。
 	               //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
 	               //alert(result.count);
 	            } 	   
		 	    ,initSort: {
		 	       field: 'classify' //排序字段，对应 cols 设定的各字段名
		 	       ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
		 	     }
 	        }); 
 	    
 	       //每行的工具条按钮被点击
 	       table.on('tool(demo01)', function(obj){ //注：tool表示监听工具条事件，demo01是table原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的DOM对象			 	
			 			  
			  switch(layEvent){			  
			  	case 'detail':				  	
				  	var $td = $(tr).find('td[data-field=wealth] div').css("background-color","gray");				  	
				  	break;
			  	case 'del':
			  		layer.confirm('真的删除该行吗?', function(index){			  			  
					      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					      layer.close(index);
					      //向服务端发送删除指令
					});
			  		break;
			  	case 'edit':
			  		//do something
			  		//同步更新缓存对应的值
				    obj.update({
				      username: '123'
				      ,title: 'xxx'
				    });
			  }			  		  
			});
	 	     
 	       //表格编辑监听
 	      table.on('edit(demo01)', function(obj){ //注：edit表示监听单元格编辑事件，demo01是table原始容器的属性 lay-filter="对应的值"
 	    	  console.log(obj.value); //得到修改后的值
 	    	  console.log(obj.field); //当前编辑的字段名
 	    	  console.log(obj.data); //所在行的所有相关数据  
 	    	  alert('修改后的数据值为：' + obj.value);
		  });
 	       
 	       //获取选中行示例
	 	   $( ".showCheckedData" ).on( "click", function(){
	 		  var tableId = layTableIns.config.id; 
	 		  var checkStatus = table.checkStatus(tableId); //test即为基础参数id对应的值
	 		 
	 		 	console.log(checkStatus.data) //获取选中行的数据
	 		 	console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
	 		 	console.log(checkStatus.isAll ) //表格是否全选
	 		 	alert('选中行数：' + checkStatus.data.length);
			});

 	       //获取laytable中的数据示例
	 		$( ".showIndexData" ).on( "click", function(){
	 			var tableId = layTableIns.config.id; 	//当前页面layTable的ID
	 			var tableData = table.cache[tableId];	//获取指定tableId的有行的数据,返回的为一个数组
	 			//prompt层
	 			layer.prompt({title: '显示第几行(从0行开始计算）)', formType: 0}, function(selectRowNum, index){
	 			  layer.close(index);	 			  
	 			  if (selectRowNum >= tableData.length) {
	 				 layer.msg('超过最大行数');
	 			  }
	 			  else {
	 				 layer.msg('第' + selectRowNum + '行,用户名为：' + tableData[selectRowNum].username);
	 			  }	 			  
	 			});	 				
	 		}); 
	 		
	 		$( "#search-btn" ).on( "click", function(){	 			
	 			var searchKey = $('#searchKey').val();
	 			var normalSelect = $('#normalSelect').val();
	 			var searchSelect = $('#searchSelect').val();			
	 			
		 		layTableIns.reload(
	 				{
	 					page: {
	 				        curr: 1 //重新从第 1 页开始
	 				    }
	 				    ,where: {
	 				    	"searchKey":searchKey
	 				    	,"normalSelect":normalSelect
	 				    	,"searchSelect":searchSelect
	 				    }
	 				}
	 			);
			});	 		    
 		 });
 				
	    
 	    	
 	</script>
 </html>